<template>
	<view>
		
		<!-- 格子广告 -->
		<view class="grid_left">
			<ad-custom :unit-id="xcx_ad.GridLeftId" 
			bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		</view>
		
		<view class="grid_right" :style="{left: (_windowWidth-70)+'px'}">
			<ad-custom :unit-id="xcx_ad.GridRightId" 
			bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		</view>
	
		<view class="top_box">
			<view class="bar">
				<view class="back_home">
					<view @click="navigateBack()" class="back">
						<u-icon color="#FFFFFF" size="25" name="rewind-left-fill"></u-icon>
					</view>
					<view @click="navigateHome()" class="home">
						<u-icon color="#FFFFFF" size="25" name="home-fill"></u-icon>
					</view>
				</view>
			</view>
			<view class="top">
				<view class="cover">
					<u-image width="100%" height="100%" :src="movie_info.cover">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u-image>
				</view>
				<view class="detail">
					<view class="name ellipsis">{{movie_info.name}}</view>
					<view class="type ellipsis">类型：{{movie_info.mtype}}</view>
					<view class="actor ellipsis">主演：{{movie_info.act}}</view>
					<view class="other ellipsis">{{movie_info.year}}/{{movie_info.country}}/{{movie_info.director}}</view>
					<view class="detailbox">
						<u-button catchtap="shareView" openType="share" icon="share" size="small" text="分享"></u-button>
						<u-button icon="moments" size="small" text="海报"></u-button>
					</view>
				</view>
			</view>
		</view>
	
	
		<view class="start_box">
			<view class="start">
				<view class="pingfen">豆瓣评分:{{movie_info.grade}}</view>
				<view class="star">
					<u-rate v-if="9.4>0" :allowHalf="true"  size="20" activeColor="#f4d13a" gutter="1" count="5" v-model="grade2"></u-rate>
					<view class="v1" v-else>暂无评分</view>
				</view>
				<!-- <u-icon name="play-circle" color="#FFFFFF" size="28"></u-icon><view @click="jum_xcx()" class="play">收藏</view> -->
			</view>
		</view>
		
		<view class="introduce_box">
			<view class="introduce">
				<view class="title_box">
					<u-icon name="file-text-fill" color="#000000" size="25"></u-icon><view class="title">影片简介</view>
				</view>
				<view class="content">
					<u-read-more color="#999" closeText="展开" :toggle="true" showHeight="300" ref="uReadMore">
						<u-parse :content="movie_info.introduce" @load="parseLoaded"></u-parse>
					</u-read-more>
				</view>
			</view>
		</view>
		
	
	</view>
</template>

<script>
	import adSdk from "@/utils/advertise.js"
	import {getJujiDetail} from "@/api/api"
	export default {
		data() {
				return {
					movie_id:0,
					movie_info:'',
					show: false,
					grade:0,
					grade2:0,
					_windowWidth:getApp().globalData._windowWidth,
					_windowHeight:getApp().globalData._windowHeight,
					
				}
			},
			onLoad: function (option) {
				this.movie_id = option.id
				this.getJujiDetail()
			},
			
			onShow:function(){
				adSdk.initInterstitial(this.xcx_ad.interstitialId)
				adSdk.showInterstitial()
			},
			
			onShareAppMessage() {
				return {
				  title: this.movie_info.vod_name,
				  path: "/pages/detail/index?id="+this.movie_id,
				  imageUrl: this.movie_info.vod_pic
				}
			},
			
			methods:{
			
				getJujiDetail(){
					getJujiDetail(this.movie_id).then(res=>{
						this.movie_info = res.data
						this.grade2 = this.movie_info.grade/2
					})
				},
				
				
				navigateBack(){
					uni.navigateBack()
				},
				navigateHome(){
					console.log('navigateHome')
					uni.switchTab({
						url: '/pages/index/index'
					});
				},
				
				parseLoaded() {
					console.log('uReadMore')
					this.$refs.uReadMore.init();
				},
				
			
			}
		}
</script>
<style>
	.xuanji_box .xuanji .v2 .u-scroll-list{padding-bottom: 0!important;}
	.detailbox .u-button{width: 150rpx!important;background-color: #f49c36!important;} 
	.top .cover .u-transition{width: 100%;height: 100%;}
	.content .u-read-more__content{color: #999!important;font-size: 24rpx!important}
	.tips .content .u-read-more__content{color: #999!important;font-size: 26rpx!important}
</style>
<style scoped>
	.star .v1{font-size: 36rpx;color: #FFFFFF;width: 270rpx;}
	.pop_jishu{width: 150rpx;margin: 10rpx 12.5rpx 10rpx 12.5rpx;height: 80rpx; text-align: center;line-height: 80rpx;border-radius: 5rpx;
		background-color: #DEDEDE;margin-bottom: 20rpx;}
	.pop_jishu_box .active{background-color: #ffcc40;}
	.pop_jishu_box .v1{display: flex;flex-wrap: wrap;width: 700rpx;font-size: 28rpx;height: 100%;}
	.pop_jishu_box{height: 600rpx;background-color: #FFFFFF;display: flex;justify-content: center;align-items: center;overflow: scroll;}
	.xuanji_box .xuanji .v1{margin-right: 20rpx;width: 50rpx;}
	.xuanji_box .xuanji .v2{width: 630rpx;}
	.xuanji_box .xuanji .jishu{border-radius: 5rpx;background-color: #dedede;margin-right: 10rpx;
	width: 116rpx;height: 70rpx;text-align: center;line-height: 70rpx;}
	.xuanji_box .xuanji .active{background-color: #ffcc40;} 
	.xuanji_box .xuanji .jishu2{border-radius: 5rpx;margin-right: 10rpx;width: 116rpx;height: 70rpx;text-align: center;line-height: 70rpx;}
	.xuanji_box .xuanji .active2{color: #ffcc40;}
	.xuanji_box .xuanji{width: 700rpx;height: 70rpx;display: flex;align-items: center;font-size: 25rpx;margin-bottom: 20rpx;}
	.xuanji_box{width: 100%;display: flex;justify-content: center;flex-wrap: wrap;}
	.back_home .back{width: 50%;display: flex;justify-content: center;border-right: .2px solid #a3a3a3;}
	.back_home .home{width: 50%;display: flex;justify-content: center;}
	.top_box .bar{width: 700rpx;margin-bottom: 50rpx;}
	.back_home{width: 206rpx; height: 76rpx;border-radius: 50rpx;border: .2px solid #a3a3a3;display: flex;align-items: center;}
	.tips .content{color: #999!important;font-size: 26rpx!important}
	.tips{width: 700rpx;}
	.tips_box{width: 100%;display: flex;justify-content: center;margin-bottom: 20rpx;}
	.recomemd_li .lianxujujishu{position: absolute;right: 20rpx;top: 230rpx;width: 180rpx;height: 40rpx;text-align: right;color: #FFFFFF;font-size: 25rpx;}
	
	.recomemd_li .pingfen{position: absolute;left: 10rpx;top: 0;width: 70rpx;height: 40rpx;line-height: 40rpx;background: #f49c36;border-bottom-right-radius: 5rpx;
		font-size: 25rpx;}
	.recomemd_li{position: relative;}
	.recommend_list{margin-top: 10rpx;}
	.recommend .zhuyan{width: 200rpx;text-align: center;font-size: 20rpx;height: 60rpx;line-height: 60rpx;color: #b3b3b3;}
	.recommend .name{width: 200rpx;font-size: 28rpx;text-align: center;}
	.swiper_img{width: 200rpx;height: 280rpx;margin: 0 10rpx;}
	.recommend_box .recommend{width: 700rpx;}
	.recommend_box{width: 100%;display: flex;justify-content: center;}
	.introduce_box .content{min-height: 150rpx;margin-top: 15rpx;}
	.title_box{display: flex;font-weight: 700;font-size: 30rpx;align-items: center;}
	.introduce_box .introduce{width: 700rpx;}
	.introduce_box{width: 100%;display: flex;justify-content: center;margin-top: 10rpx;}
	.start .play{color: #FFFFFF;margin-left: 20rpx;font-size: 36rpx;}
	.star{display: flex;margin: 0 20rpx 0 10rpx;}
	.start .pingfen{font-weight: 700;color: #f4d13a;font-size: 28rpx;margin-left: 175rpx;}
	.start{width: 700rpx;height: 150rpx;background-color: rgba(42,84,127,.5);border-radius: 10rpx;line-height: 150rpx;display: flex;}
	.start_box{width: 100%;display: flex;;justify-content: center;}
	.detailbox{display: flex;}
	.top .detail .type,.top .detail .actor,.top .detail .other{font-size: 28rpx;font-weight: 500;}
	.top .detail .name{font-size: 36rpx;font-weight: 900;}
	.top .detail{height: 350rpx;width: 350rpx;margin-left: 40rpx;display: flex;-webkit-box-orient: vertical;
	-webkit-box-direction: normal;flex-direction: column;-webkit-box-pack: space-evenly;justify-content: space-evenly;}
	.top{width: 630rpx;display: flex;}
	.top .cover{width: 240rpx;height: 350rpx;border-radius: 5rpx;overflow: hidden;}
	.top_box{width: 100%;display: flex;justify-content: center;padding-top: 80rpx;height:550rpx;flex-wrap: wrap;
	background: -webkit-linear-gradient(top,#6882fd,rgba(104,130,253,.7),rgba(85,170,255,.05));}
</style>